<template>
  <div class="hello">
      <el-date-picker
                v-model="rule.startTime"
                type="datetime"
                placeholder="选择开始时间">
              </el-date-picker>~ <el-date-picker  v-model="rule.endTime"
              type="datetime"
              placeholder="选择结束时间"
            ></el-date-picker>
     
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      required: true
    },
    items: {
      type: Array,
      default: Array
    }
  },
  data () {
    return {
      rule: {
        startTime: '',
        endTime: ''
      }
    }
  },
  watch: {
    rule: {
      handler (newV, oldV) {
        
        if (newV.startTime == undefined || newV.startTime.length === 0) {
          return false
        }
        if (newV.endTime == undefined || newV.endTime.length === 0) {
          return false
        }
        
        this.$emit('uploadData', {index: this.index, data: newV})
      },
      deep: true
    },
    items: {
      handler (newV, oldV) {
        if (newV.length !== 0) {
          this.rule = {...newV[this.index]}
        }
      },
      deep: true
    }
  },
  methods: {
    deleteStudent: function () {
      this.$emit('deleteIndex', this.index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>